<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header">
          <PageTools>
            <!-- 插入到left插槽位置 -->
            <template #left>
              <span>总记录数：100条</span>
            </template>
            <!-- 插入到right插槽位置 -->
            <template #right>
              <el-button
                type="warning"
                size="small"
                @click="$router.push('/import')"
              >
                导入excel
              </el-button>
              <el-button
                :loading="downloadLoading"
                type="danger"
                size="small"
                @click="exportData"
              >
                导出excel
              </el-button>
              <el-button
                v-if="!canClick('p-em-add')"
                type="primary"
                size="small"
                @click="showDialog = true"
              >
                新增员工
              </el-button>
            </template>
          </PageTools>
        </div>
        <div>
          <!-- table列表 -->
          <el-table
            :data="employeeList"
            border
            stripe
            :default-sort="{ prop: 'workNumber', order: 'ascending' }"
          >
            <!-- prop指定按某一列进行排序,order指定排序规则 升序ascending 降序descending -->
            <el-table-column type="index" label="序号" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column prop="staffPhoto" label="头像">
              <template #default="{ row }">
                <el-image
                  class="round"
                  :src="row.staffPhoto"
                  @click="showQRCodeDialog(row.staffPhoto)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="workNumber" sortable label="工号" />
            <el-table-column label="聘用形式">
              <template #default="{ row }">{{
                formatForm(row.formOfEmployment)
              }}</template>
            </el-table-column>
            <el-table-column prop="departmentName" label="部门" />
            <el-table-column prop="correctionTime" sortable label="入职时间">
              <!-- <template #default="{ row }">{{
                formatTime(row.timeOfEntry)
              }}</template> -->
            </el-table-column>
            <el-table-column label="账户状态">
              <template #default="{ row }">
                <el-switch v-model="row.state" />
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="280">
              <template #default="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="$router.push(`/employees/detail/${row.id}`)"
                >
                  查看
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="openRoleDialog(row)"
                >
                  分配角色
                </el-button>
                <el-button type="text" size="small" @click="delEmployee(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              background
              :current-page="query.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="query.size"
              :total="total"
              layout="total, sizes,  prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </el-card>
    </div>

    <!-- 添加员工对话框区域 -->
    <addEmployee :show-dialog="showDialog" @close-dialog="closeDialog">
    </addEmployee>

    <!-- 分享二维码对话框 -->
    <el-dialog title="分享二维码" :visible.sync="QRCodeDialog" width="20%">
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas"></canvas>
      </el-row>
    </el-dialog>

    <!-- 分配角色对话框 -->
    <assignRole :show-role-dialog.sync="showRoleDialog"></assignRole>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getEmployeeListApi, delEmployeeApi } from '@/api/employees'
// 导入枚举类型数据
import EnumType from '@/api/constant/employees'
// console.log('枚举类型数据', EnumType)
import addEmployee from './components/add-employee.vue'
import assignRole from './components/assign-role.vue'
import QRCode from 'qrcode'
export default {
  components: {
    addEmployee,
    assignRole
  },
  data () {
    return {
      // 控制分享二维码对话框显示与隐藏
      QRCodeDialog: false,
      // 控制添加员工对话框的显示与隐藏
      showDialog: false,
      qy: true,
      // 根据封装的接口 -> 1.拿到什么数据  2.需要什么参数
      // 员工列表数据
      employeeList: [],
      query: {
        page: 1, // 页码
        size: 5 // 每页条数
      },
      total: 0, // 总数
      downloadLoading: false,
      showRoleDialog: false
    }
  },
  created () {
    this.getEmployeeList()
  },
  methods: {
    // 打开分配角色对话框
    openRoleDialog (row) {
      console.log(row)
      this.showRoleDialog = true
      // console.log(this.$children)
      this.$children[3].getUserDetail(row.id)
    },
    // 显示分享二维码对话框
    async showQRCodeDialog (url) {
      if (!url) return
      this.QRCodeDialog = true
      // DOM的渲染是异步的,先打开对话框,canvas还没有渲染,不使用$nextTick会拿不到最新的canvasDOM,此时$refs.myCanvas是undefined拿不到canvas标签提供的getContext()方法
      // this.$nextTick(() => {
      //   QRCode.toCanvas(this.$refs.myCanvas, url)
      // })
      await this.$nextTick()
      QRCode.toCanvas(this.$refs.myCanvas, url)
    },
    // 添加员工对话框关闭
    closeDialog () {
      this.showDialog = false
    },
    // 删除员工
    async delEmployee (row) {
      try {
        await this.$confirm(`确定要删除${row.username}员工吗`, '删除提示')
        await delEmployeeApi(row.id)
        // element组件问题:删除完最后一页数据后,页码显示正确,但是请求的是已经删完了的最后一页的数据,此时会出现页面正确但是没有数据的错误
        /**
         * 1.计算最新页数 -> 最后一页页码
         * 页码 = (总条数-1) / 每页条数
         * 2.重新赋值
         */
        const newPage = Math.ceil((this.total - 1) / this.query.size)
        // if (newPage > 0) {
        //   this.query.page = newPage
        // }
        if (this.query.page > newPage) {
          this.query.page = newPage
        }
        this.$message.success('删除成功')
        this.getEmployeeList()
      } catch (error) {
        console.log(error)
        this.$message.info('取消了删除')
      }
    },
    // 格式化聘用形式 1->正式 2->非正式
    formatForm (type) {
      // console.log(EnumType.hireType)
      /**
       * 1.根据数组生成映射关系 -> 1正式 2非正式
       * 2.根据映射关系获取value值
       */
      const map = {}
      EnumType.hireType.forEach(item => {
        map[item.id] = item.value
      })
      return map[type]
    },
    // 格式化时间
    formatTime (time, str = 'YYYY-MM-DD') {
      return dayjs(time).format(str)
    },
    // 获取员工列表数据
    async getEmployeeList () {
      const { rows, total } = await getEmployeeListApi(this.query)
      // console.log(employeeList)
      console.log('rows', rows)
      this.employeeList = rows
      this.total = total
      rows.forEach(item => {
        item.state = Math.random() < 0.5
      })
    },
    // 切换页码
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getEmployeeList(this.query)
    },
    // 切换size
    handleSizeChange (newSize) {
      this.query.size = newSize
      this.getEmployeeList(this.query)
    },
    // 导出某页员工数据
    async exportData () {
      // 1.开始导出
      this.downloadLoading = true
      // 2.使用excel导出插件导出数据(核心)
      // 准备需要导出的员工信息map映射关系(根据后台返回的用户数据字段顺序保持一致)
      const userMap = {
        '手机号': 'mobile',
        '姓名': 'username',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '工号': 'workNumber',
        '转正日期': 'correctionTime',
        '部门': 'departmentName'
      }
      // 根据映射关系获取导出的表头
      // 中文key属性的数组
      const header = Object.keys(userMap)
      const enHeader = Object.values(userMap)
      console.log(header)
      console.log(enHeader)
      const data = this.transformList(this.employeeList, enHeader)
      console.log(data)
      // 接下来把list员工列表转换成二维数组
      // 按需加载一个js模块(懒加载)
      const excel = await import('@/utils/Export2Excel')
      // 拿到该js导出的两个函数
      console.log('excel导出方法: ', excel)
      // 传入一个配置对象
      excel.export_json_to_excel({
        // 表头 必填
        // header: ['姓名', '工资'],
        header,
        // 表头对应的具体数据 必填
        // data: [
        //   ['刘备', 20000, 'CEO'],
        //   ['关羽', 10000, '财务'],
        //   ['张飞', 5000, '保安']
        // ],
        data,
        filename: `elm-list-${Date.now()}`, // 导出下载的文件名称
        autoWidth: true, // 导出excel列宽度是否自适应
        bookType: 'xlsx' // 导出生成的文件类型
      })
      // 3.导出成功关闭loading
      this.downloadLoading = false
    },
    // 将list员工列表转换成二维数组[[], [], ...]
    transformList (list, enHeader) {
      /**
       * 思路:
       * 1.准备一个空数组存储转换结果
       * 2.遍历list根据enHeader进行转换
       * 3.返回转换结果
       */
      const secondArray = []
      list.forEach(user => {
        // 把user对象中的值,放到一个数组中(根据enHeader)
        const itemArray = []
        for (const key in user) {
          // 指定导出哪些员工数据
          if (enHeader.includes(key)) {
            // 处理聘用关系=>转换数字
            if (key === 'formOfEmployment') {
              itemArray.push(this.formatForm(user[key]))
            } else {
              itemArray.push(user[key])
            }
          }
        }
        secondArray.push(itemArray)
      })
      return secondArray
    }
  }
}
</script>

<style lang="scss" scoped>
.round {
  width: 80px;
  height: 80px;
  border-radius: 80px;
}
</style>
